<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第一课 的第二个文件</title>

	</head>

	<body>
		<h1 align="center">选择器和选择器的优先级问题</h1>
		<hr>
		<ol>
			<li>CSS选择器：选择器是一种模式，用于选择需要添加样式的元素</li>
			<li>ID属性：唯一的，一个HTML页面中不允许出现两个相同的ID，否则可能出现不可预料的错误</li>
			<li>Class属性：一个元素可以同时拥有多个class属性，class之间以空格隔开</li>
			<li>如果两个选择器定义的样式一模一样，我们可以用“,”间隔两个选择器，使之公用一个样式</li>

		</ol>
		<section>
			CSS选择器种类：
			<ol>
				<li>
					ID选择器： #idname
				</li>
				<li>
					类选择器： .classname
				</li>
				<li>
					标签选择器： div, h2, h3
				</li>
				<li>
					属性选择器： [name]
				</li>
			</ol>

			四个权重等级：
			<ol>
				<li>1： style属性中的样式等级最高</li>
				<li>2： ID选择器</li>
				<li>3： 类选择器和属性选择器</li>
				<li>4： 标签选择器</li>
			</ol>

			先按照权重级别排序，然后按照顺序排序。
			权重越高的越能覆盖掉别的样式。权重低的则容易被覆盖。
			同等权重下，越靠后的优先级越高。
		</section>

		<p>演示：</p>

		<div id="div1">
			我是一个DIV
		</div>

		<div class="div2">
			我是DIV2
		</div>
		<div class="div2 div2-2">
			我是DIV2-2
		</div>
		<div class="div-teshu">
			<div id="div2" class="div2"  name="div2">
				<div>
					<span>我是<b class="tag-b">DIV</b>2</span>
				</div>
			</div>
		</div>
		<div class="div2 divbuyiyang">
			<div>
				我是DIV2-2
				<b>黄色的</b>
			</div>
		</div>

		<style>
			.div2 span b {
				color: red;
			}

			.div2 b {
				color: #0ff;
			}
			/*#div1 {
				background: #0f0;
			}
			#div2 {
				background: #0f0;
			}

			.div-teshu .div2  {
				background: #ff0;
			}

			[name="div2"] {
				background: #f0f;
			}

			div {
				background: #ccc;
			}*/
			

		</style>

	</body>
</html>